<template>
    <div>
        <div class="list" v-if="isshow">
            <el-button type="danger" style="float:left;" @click="lable_list">使用中</el-button>
            <el-button type="success" style="float:left;" @click="del_lable_list">存档</el-button>
            <el-button type="success" style="float:left;" @click="all_lable_list">全部</el-button>
            <br><br>
            <div class="tab">
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                        type="index"
                        label="序号"
                        align='center'
                        sortable
                        width="70">
                    </el-table-column>
                    <el-table-column
                        label="标签ID"
                        align='center'
                        width="120">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.lable_id }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="货物类型"
                        align='center'
                        width="80">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.goods_name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="创建人"
                        align='center'
                        width="200">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.create_name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="分配用户"
                        align='center'
                        width="180">
                        <template slot-scope="scope">
                            
                            <span style="margin-left: 10px">{{ scope.row.username }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="创建时间"
                        align='center'>
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="更新时间"
                        align='center'>
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.update_time }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="200">
                        <template slot-scope="scope">
                        <el-button @click="update_lable(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="lable_delete(scope.$index, scope.row)" type="text" size="small">存档</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-dialog title="标签信息修改" :visible.sync="dialogFormVisible">
            <el-form :model="form">
            <el-form-item label="标签ID">
                    <el-input v-model="lable_id"></el-input>
                </el-form-item>
                <el-form-item label="货物类型">
                    <el-select v-model="form.value1" style="width: 220px;">
                      <el-option v-for="item in options1" :key="item.id" :value="item.id" :label="item.goods_name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分配用户">
                    <el-select v-model="form.value2" style="width: 220px;">
                      <el-option v-for="item in options2" :key="item.id" :label="item.username" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>      
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updatelable()">确认修改</el-button>
            </div>
            </el-dialog>
            <div class="page">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="paginations.page_index"
                :page-sizes="paginations.page_sizes"
                :page-size="paginations.page_size"
                :layout="paginations.layout"
                :total="paginations.total">
                </el-pagination>
            </div>
        </div>
        <div class="list" v-if="!isshow">
            <el-button type="danger" style="float:left;" @click="lable_list">使用中</el-button>
            <el-button type="success" style="float:left;" @click="del_lable_list">存档</el-button>
            <el-button type="success" style="float:left;" @click="all_lable_list">全部</el-button>
            <br><br>
            <div class="tab">
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                        type="index"
                        label="序号"
                        align='center'
                        sortable
                        width="70">
                    </el-table-column>
                    <el-table-column
                        label="标签ID"
                        align='center'
                        width="120">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.lable_id }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="货物类型"
                        align='center'
                        width="80">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.goods_name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="创建人"
                        align='center'
                        width="200">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.create_name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="分配用户"
                        align='center'
                        width="180">
                        <template slot-scope="scope">
                            
                            <span style="margin-left: 10px">{{ scope.row.username }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="创建时间"
                        align='center'>
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="更新时间"
                        align='center'>
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.update_time }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="paginations.page_index"
                :page-sizes="paginations.page_sizes"
                :page-size="paginations.page_size"
                :layout="paginations.layout"
                :total="paginations.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import{lablelist,del_lablelist,all_lablelist,delete_lable,user_info,getgoods,update_lable} from '../../api/api.js'
	export default {
		name:"list",
		data() {
			return {
                id:0,
                lable_id:'',
                isshow:'展示',
				tableData:[], //数据
				paginations:{
					page_index:1, //当前页
					total:0, //总数
					page_size:5, //一页显示多少
					page_sizes:[5,10,15,20], //每页显示多少条
					layout:'total, sizes, prev, pager, next, jumper'
				},
                allTableData:[],
                dialogFormVisible: false,
                form: {
                    region: '',
                    value1: '',
                    value2: '',
                },
                options1: [],
                options2: [],
			}
		},
		methods: {
            //修改标签
            updatelable(){
                var params = {
                    id:this.id,
                    send_uid : this.form.value2,
                    cargo_type_id : this.form.value1,
                };
                update_lable(params).then(res=>{
                this.$message(res.message)
                this.$router.go(0);
            })
            },
            //获取货物
            get_goods(){
                var params = {
                };
                getgoods(params).then(res=>{
                console.log(res)
                    this.options1=res
                })
            },
            //获取用户
            get_user(){
                var params = {
                    uid:localStorage.getItem('uid')
                };
                user_info(params).then(res=>{
                console.log(res)
                    this.options2=res
                })
            },
            //修改标签
            update_lable(index,row){
                this.id = row.id
                this.lable_id = row.lable_id
                this.dialogFormVisible=true;
            },
            //标签存档
            lable_delete(index, row){
                var params = {
                    lable_id:row.lable_id
                    };
                delete_lable(params).then(res=>{
                this.$message(res.message)
                this.$router.go(0);
                })
            },
            //获取全部标签
            all_lable_list(){
                var params = {
            };
            all_lablelist(params).then(res=>{
                console.log(res)
                const data = res;
                this.allTableData = data;
                this.setPaginations()
                this.isshow=''
            })
            },
            //获取存档标签
            del_lable_list(){
                var params = {
            };
            del_lablelist(params).then(res=>{
                console.log(res)
                const data = res;
                this.allTableData = data;
                this.setPaginations()
                this.isshow=''
            })
            },
            //获取使用中标签
            lable_list() {
                var params = {
            };
            lablelist(params).then(res=>{
                console.log(res)
                const data = res;
                this.allTableData = data;
                this.setPaginations()
                this.isshow='展示'
            })
            },
			setPaginations(){
				this.paginations.total = this.allTableData.length; //数据的数量
				this.paginations.page_index = 1; //默认显示第一页
				this.paginations.page_size = 5; //每页显示多少数据
				
				//显示数据
				this.tableData = this.allTableData.filter((item,index) => {
					return index < this.paginations.page_size;
				})
			},
			handleSizeChange(page_size) {
				this.paginations.page_index = 1; //第一页
				this.paginations.page_size = page_size; //每页先显示多少数据
				this.tableData = this.allTableData.filter((item,index) => {
					return index < page_size
				})
			},
			handleCurrentChange(page){
				// 跳转页数
				//获取当前页
				let index = this.paginations.page_size * (page -1);
				//获取总数
				let allData = this.paginations.page_size * page;
				
				let tablist=[];
				for(let i = index;i<allData;i++) {
					if (this.allTableData[i]) {
						tablist.push(this.allTableData[i])
					}
					this.tableData = tablist
				}
			}
		},
		created(){
            this.lable_list()
            this.get_user()
            this.get_goods()
		}
	}
</script>

<style scoped>
	.list {
		margin: 20px;
	}
	.page {
		float: right;
		margin-top: 20px;
	}
</style>